<template>
  <div class="root-content">
    <BackRandom />
    <img class="light" src="@/assets/imgs/backs/light.jpg" />
    <img class="snow" src="@/assets/imgs/con1/snow1.png" />
    <img class="img1" src="@/assets/imgs/con1/guy-black.png" />
    <img class="img2" src="@/assets/imgs/con1/guy-black.png" />
    <img class="img3" src="@/assets/imgs/con1/guy-music.png" />
    <img class="img4" src="@/assets/imgs/con1/guy-music.png" />
    <img class="img5" src="@/assets/imgs/con1/guy-three.png" />

    <img class="img6" src="@/assets/imgs/con1/head1.png" />
    <img class="img7" src="@/assets/imgs/con1/head2.png" />

    <img class="img8" src="@/assets/imgs/con1/e1.png" />
    <img class="img9" src="@/assets/imgs/con1/e2.png" />
    <img class="img10" src="@/assets/imgs/con1/e3.png" />

    <img class="img11" src="@/assets/imgs/con1/word1.png" />
    <img class="img12" src="@/assets/imgs/con1/word2.png" />
    <img class="img13" src="@/assets/imgs/con1/word3.png" />
  </div>
</template>

<script>
import BackRandom from "./BackRandom.vue";
export default {
  data() {
    return {};
  },
  components: {
    BackRandom,
  },
};
</script>

<style lang="less" scoped>
@keyframes ani-black-guy {
  0% {
    scale: 1 1;
  }
  25% {
    scale: -1 1;
  }
  50% {
    scale: 1 1;
  }
  75% {
    scale: -1 1;
  }
  100% {
    scale: 1 1;
  }
}

@keyframes ani-music-guy {
  0% {
    transform: translateX(0) translateY(0);
  }
  10% {
    transform: translateX(-0.1rem) translateY(-0.2rem);
  }
  20% {
    transform: translateX(-0.2rem) translateY(0);
  }
  30% {
    transform: translateX(-0.3rem) translateY(-0.2rem);
  }
  40% {
    transform: translateX(-0.4rem) translateY(0);
  }
  50% {
    transform: translateX(-0.5rem) translateY(-0.2rem);
  }
  60% {
    transform: translateX(-0.6rem) translateY(0);
  }
  70% {
    transform: translateX(-0.7rem) translateY(-0.2rem);
  }
  80% {
    transform: translateX(-0.8rem) translateY(0);
  }
  90% {
    transform: translateX(-0.9rem) translateY(-0.2rem);
  }
  100% {
    transform: translateX(-1rem) translateY(0);
  }
}

@keyframes ani-three-guy {
  0% {
    scale: 1 1;
  }
  25% {
    scale: -1 1;
  }
  50% {
    scale: 1 1;
  }
  75% {
    scale: -1 1;
  }
  100% {
    scale: 1 1;
  }
}

@keyframes vibrate-2 {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(2px, -2px);
  }
  40% {
    transform: translate(2px, 2px);
  }
  60% {
    transform: translate(-2px, 2px);
  }
  80% {
    transform: translate(-2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes ani-head {
  0% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(45deg);
  }
}

@keyframes ani-head2 {
  0% {
    transform: translate(0, 0) scale(1, 1);
  }
  100% {
    transform: translate(0, 0.5rem) scale(1.04, 1.04);
  }
}

@keyframes ani-words {
  0% {
    transform: translate(0) rotate(-20deg);
  }
  20% {
    transform: translate(1rem, -1rem) rotate(40deg);
  }
  40% {
    transform: translate(1rem, 1rem) rotate(100deg);
  }
  60% {
    transform: translate(-1rem, 1rem) rotate(60deg);
  }
  80% {
    transform: translate(-1rem, -1rem) rotate(20deg);
  }
  100% {
    transform: translate(0) rotate(180deg);
  }
}

.root-content {
  position: relative;
  overflow: hidden;
  height: 12.55rem;
  width: 100%;
  & > img {
    pointer-events: none;
  }
  .light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    mix-blend-mode:  overlay;
  }
  .snow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -50%);
    width: 6.78rem;
    height: auto;
    z-index: 10;
  }
  .img1 {
    position: absolute;
    top: 2.45rem;
    left: 0.1rem;
    width: 1.93rem;
    height: auto;
    z-index: 2;
    animation: ani-black-guy 1.5s steps(1, start) infinite both;
  }
  .img2 {
    position: absolute;
    top: 2.7rem;
    right: 0.5rem;
    width: 1.93rem;
    height: auto;
    z-index: 2;
    transform: scale(-1, 1);
    animation: ani-black-guy 1.5s steps(1, start) infinite both;
  }
  .img3 {
    position: absolute;
    top: 3.97rem;
    left: 0.27rem;
    width: 4.13rem;
    height: auto;
    z-index: 2;
    animation: ani-music-guy 1.5s infinite alternate both;
  }
  .img4 {
    position: absolute;
    top: 4rem;
    right: 0.76rem;
    width: 4.13rem;
    height: auto;
    z-index: 2;
    scale: -1 1;
    animation: ani-music-guy 1.5s infinite alternate both;
  }
  .img5 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 6.95rem;
    height: auto;
    z-index: 2;
    animation: vibrate-2 0.5s linear infinite both;
  }
  .img6 {
    position: absolute;
    top: 1.26rem;
    left: 3.34rem;
    width: 1.7rem;
    height: auto;
    z-index: 2;
    animation: vibrate-2 0.5s linear infinite both;
  }
  .img7 {
    position: absolute;
    bottom: 0.78rem;
    left: 7.42rem;
    width: 1.25rem;
    height: auto;
    z-index: 2;
    animation: vibrate-2 0.5s linear infinite both;
  }
  .img8 {
    position: absolute;
    top: 0.55rem;
    right: 5.95rem;
    width: 3.35rem;
    height: auto;
    z-index: 2;
    rotate: -45deg;
    animation: ani-head 2s ease-in-out infinite alternate both;
    transform-origin: 50% 100%;
  }
  .img9 {
    position: absolute;
    top: 5.09rem;
    right: 4.49rem;
    width: 3rem;
    height: auto;
    z-index: 2;
    animation: ani-head2 0.5s ease-in-out infinite alternate both,
      ani-black-guy 6s steps(1, start) infinite both;
  }
  .img10 {
    position: absolute;
    bottom: 3.22rem;
    left: 4.87rem;
    width: 2.44rem;
    height: auto;
    z-index: 2;
    animation: ani-head2 0.5s ease-in-out infinite alternate both,
      ani-black-guy 6s steps(1, start) 1s infinite both;
  }
  .img11 {
    position: absolute;
    top: 3.42rem;
    left: 4.23rem;
    width: 1.63rem;
    height: auto;
    z-index: 2;
    animation: ani-words 4s ease-in-out infinite alternate both;
  }
  .img12 {
    position: absolute;
    top: 3.8rem;
    right: 4.3rem;
    width: 2rem;
    height: auto;
    z-index: 2;
    animation: ani-words 3s ease-in-out 0.5s infinite alternate both;
  }
  .img13 {
    position: absolute;
    bottom: 2.37rem;
    left: 3.82rem;
    width: 1.85rem;
    height: auto;
    z-index: 2;
    animation: ani-words 3.5s ease-in-out 0.8s infinite alternate both;
  }
}
</style>